<template>
  <div class="message">
    <div class="user-input">
      <div v-exchangeHtml:foo="htmlStr"></div>
      <div class="message-box">
        <div class="input-box">
          <mt-field placeholder="请输入昵称" v-model="username"></mt-field>
          <mt-field placeholder="请输入留言内容" v-model="message"></mt-field>
        </div>
        <div class="send-box">
          <mt-button type="primary" @click="sendMessage">发送</mt-button>
        </div>
      </div>
    </div>

    <div @click="clearStorage" class="iconfont icon-shanchu clear-btn">
      清空
    </div>

    <!-- 内容展示 -->
    <div class="content-box" v-if="messageList.length != 0">
      <transition-group name="slide-fade" tag="ul">
        <li
          class="msg-item"
          v-for="(item, idx) in messageList"
          :key="item.username + item.message"
        >
          <message-item
            :username="item.username"
            :message="item.message"
            :idx="idx"
            @delMsg="delItem"
          />
        </li>
      </transition-group>
    </div>
    <div class="empty-tips" v-else>
      <div>暂无留言……</div>
    </div>
  </div>
</template>

<script>
import MessageItem from "components/content/MessageItem.vue";

import {
  getKey,
  setItem,
  getItem,
  removeItem,
  localStorageLen,
  clearLocalStorage,
} from "common/localStorage";

let selfName = "_msg_";

export default {
  name: "Message",
  data() {
    return {
      htmlStr:
        "<div style='display: flex; justify-content: space-between; padding: 8px 0;'><span></span><b>留言板</b> <span></span></div>",
      username: "",
      message: "",
      messageList: [],
    };
  },
  methods: {
    sendMessage() {
      if (this.message != "" && this.message != null) {
        setItem(selfName + this.username, this.message);

        // this.$set(this.messageList, this.messageList.length, {
        //   username: this.username,
        //   message: this.message,
        // });

        this.messageList.splice(0, 0, {
          username: this.username,
          message: this.message,
        });

        this.username = "";
        this.message = "";
      }
    },
    clearStorage() {
      clearLocalStorage()
        .then(() => {
          this.messageList.splice(0);
        })
        .catch(() => {});
    },
    delItem(name, idx) {
      removeItem(selfName + name)
        .then(() => {
          // 更新数据
          this.messageList.splice(idx, 1);

          // console.log(
          // for (let i = 0; i < this.messageList.length; i++) {
          //   const msg = this.messageList[i];
          //   if (msg.username === name && msg.message === message) {
          //     this.messageList.splice(i, 1);
          //     break;
          //   }
          // }
          // );
        })
        .catch(() => {});
    },
  },
  created() {
    for (let i = 0; i < localStorageLen(); i++) {
      let key = getKey(i);
      if (key.indexOf(selfName) == -1) continue;

      // this.$set(this.messageList, this.messageList.length, {
      //   username: key.replace(/^(_msg_)?/, ""),
      //   message: getItem(key),
      // });

      this.messageList.splice(0, 0, {
        username: key.replace(/^(_msg_)?/, ""),
        message: getItem(key),
      });
    }
    console.log(this.messageList);
  },
  components: {
    MessageItem,
  },
};
</script>

<style scoped>
.clear-btn {
  font-size: 16px;
  margin: 10px auto;
  text-align: center;
  color: var(--gray);
}
.message-box {
  display: grid;
  grid-template-columns: 8fr 2fr;
}
.message {
  padding: 0 8px;
}
.empty-tips {
  text-align: center;
  color: var(--theme);
  margin-top: 20px;
}
.user-input {
  margin-top: 15px;
  padding: 10px 10px 10px 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.send-box .mint-button {
  width: 100%;
  height: 100%;
}
.input-box >>> .mint-field-core {
  border-bottom: 1px solid var(--gray2);
}

.content-box {
  margin-top: 15px;
  height: calc(var(--viewport-height) - 260px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #72adfd;
  padding: 10px;
  border-radius: 10px;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: 0.7s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>